<template>
  <div :style="bg">
    <div class="login">
      <!-- 登录验证 -->
      <main>
        <van-form>
          <van-field class="input" v-model="username" name="用户名" label="用户名" placeholder="请填写用户姓名" />
          <van-field class="input" v-model="password" type="password" name="密码" label="密码" placeholder="默认:123456" />
          <div class="btn">
            <van-button round plain type="info" @click="onSubmit1"> 我要登记 </van-button>
            <van-button round type="info" native-type="submit" @click="onSubmit"> 直接登录 </van-button>
          </div>
        </van-form>
      </main>
      <header>
        <ul>
          <li @click="downloadApp">点击下载安卓APP</li>
          <li>客服q:1814113369</li>
        </ul>
      </header>
    </div>
  </div>
</template>
<script>
import API from "@/api/index.js";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      bg: {
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("../../public/images/keep/bg.jpg") + ")",
      },
    };
  },
  methods: {
    onSubmit() {
      this.$toast.loading({
        message: "加载中...",
        duration: 10000,
        forbidClick: true,
      });
      if (this.username == "管理员" && this.password == "123456") {
        this.$axios({
          // 请求方法
          method: "POST",
          // 请求url
          url: API.admin,
        })
          .then((response) => {
            this.$toast.clear();
            // 处理请求的结果
            if (response.data == "no") {
              // 显示新的弹出层 - 清空密码区域
              alert("读取列表出错了");
              location.href = "";
              return;
            }
            this.response = response;
            // console.log(this.response.data);
            this.$router.push({
              name: "Adimin",
              params: {
                userdata: this.response.data,
              },
            });
          })
          .catch((err) => {
            // 打印错误信息
            console.error(err);
          });
      } else {
        this.$axios({
          // 请求方法
          method: "POST",
          // 请求url
          url: API.login,
          // 请求体参数
          data: {
            name: this.username,
            password: this.password,
          },
        })
          .then((response) => {
            this.$toast.clear();
            // 处理请求的结果
            if (response.data == "no") {
              // 显示新的弹出层 - 清空密码区域
              this.$toast.fail("用户名或密码输入错误");
              return;
            }
            this.response = response;
            this.$router.replace({
              name: "home",
              params: {
                mydata: this.response.data,
              },
            });
          })
          .catch((err) => {
            // 打印错误信息
            console.error(err);
          });
      }
    },
    onSubmit1() {
      // 路由跳转即可;
      this.$router.push({
        name: "register",
      });
    },
    downloadApp() {
      var src = "https://back.wudetian.top/myapp__20240509175131.apk";
      var form = window.document.createElement("form");
      form.action = src;
      window.document.getElementsByTagName("body")[0].appendChild(form);
      form.submit();
    },
  },
};
</script>

<style scoped>
.input {
  margin-top: 1vw;
  outline: none;
  border: 0;
  color: rgb(5, 5, 5);
  background-color: rgba(255, 255, 255, 0.9);
}
header {
  position: absolute;
  bottom: 10vw;
  width: 100vw;
  line-height: 1.7em;
  text-align: center;
  color: rgba(255, 255, 255, 0.979);
}
.popup {
  padding: 3vw;
}
.login {
  display: block;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(1.5px);
  box-shadow: -10px 0px 20px rgba(71, 71, 71, 0.8);
  transition: all 0.5s ease 0s;
  animation: login 0.7s 0s forwards;
}
@keyframes login {
  0% {
    transform: translate3d(-100vw, 0vh, 0);
  }
  100% {
    transform: translate3d(0, 0vh, 0);
  }
}
.login main {
  /* 后期改为毛玻璃更好看 */
  position: relative;
  top: 30vh;
  left: 10vw;
  width: 80vw;
  height: 30vh;
  text-align: center;
  padding: 5vh 0;
  backdrop-filter: blur(8px);
}
.btn {
  display: flex;
  justify-content: space-around;
  width: 80vw;
  margin-top: 16px;
}
.van-button {
  width: 40%;
}
</style>
